<template>
	<gui-page :refreshBgColor="['#112A87','##4969DE','#49A4F3','#ffffff']"
		:refreshColor="['#FFFFFF','#FFFFFF','#FFFFFF','#112A87']" ref="guipage" :refresh="true" @reload="reload">
		<view class="main" slot="gBody">
			<view class="header gui-flex gui-align-items-center">
				<!-- <image class="tx_img" :src="userInfo.avatar" mode="aspectFit"></image> -->
				<gui-image :src="userInfo.avatar" :width="126" :height="126" borderRadius="50%"
					mode="aspectFill" v-if="userInfo.avatar"></gui-image>
					<image src="../../static/tx.png" style="width: 126rpx;height: 126rpx;" mode="aspectFill" v-else></image>
				<view class="n_info" @tap="jumpLogin">
					<view class="name f32" v-if="hasLogin">
						{{userInfo.realName || '--'}}
					</view>
					<view class="name f32" v-else>
						请先登录
					</view>
					<view class="desc c666 f26">
						{{userInfo.organizeName || '--'}}
					</view>
				</view>
			</view>
			<view class="menu_warp mt_50">
				<view class="title f24">
					个人资料
				</view>
				<view class="row mt_30 gui-flex gui-space-between gui-align-items-center" @click="chooseImage">
					<view class="icon">
						<image src="@/static/image/m_grxx.png" mode="aspectFit" class="icon_image"></image>
					</view>
					<view class="right_con gui-flex1 gui-flex gui-space-between gui-align-items-center">
						<view class="info">
							<view class="name f26">
								个人形象
							</view>
							<view class="desc f22">
								点击编辑头像
							</view>
						</view>
						<view class="gui-icons">
							&#xe601;
						</view>
					</view>
				</view>
				<view class="row mt_50 gui-flex gui-space-between gui-align-items-center" @tap="jumpSetting">
					<view class="icon">
						<image src="@/static/image/m_lxfs.png" mode="aspectFit" class="icon_image"></image>
					</view>
					<view class="right_con gui-flex1 gui-flex gui-space-between gui-align-items-center">
						<view class="info">
							<view class="name f26" v-if="userInfo.phone">
								联系方式：{{ $u.phoneHide(userInfo.phone) }}
							</view>
							<view class="name f26" v-else>
								联系方式：--
							</view>
							<view class="desc f22">
								点击更换手机号
							</view>
						</view>
						<view class="gui-icons">
							&#xe601;
						</view>
					</view>
				</view>
			</view>
			<view class="menu_warp mt_50">
				<view class="title f24">
					个人资料
				</view>
				<view class="row mt_30 gui-flex gui-space-between gui-align-items-center"
					@tap="$u.to(`/pages/login/forgotPassword`)">
					<view class="icon">
						<image src="@/static/image/m_grxx.png" mode="aspectFit" class="icon_image"></image>
					</view>
					<view class="right_con gui-flex1 gui-flex gui-space-between gui-align-items-center">
						<view class="info">
							<view class="name f26">
								修改密码
							</view>
							<view class="desc f22">
								点击右侧箭头编辑密码
							</view>
						</view>
						<view class="gui-icons">
							&#xe601;
						</view>
					</view>
				</view>
				<view class="row mt_50 gui-flex gui-space-between gui-align-items-center" @click="updateNoticeIs">
					<view class="icon">
						<image src="@/static/image/m_lxfs.png" mode="aspectFit" class="icon_image"></image>
					</view>
					<view class="right_con gui-flex1 gui-flex gui-space-between gui-align-items-center">
						<view class="info">
							<view class="name f26">
								事项/公告通知
							</view>
							<view class="desc f22">
								点击更换通知状态
							</view>
						</view>
						<view class="gui-icons f24 c666" :class="{'active': (userInfo.noticeIs == 1)}" >
							{{(userInfo.noticeIs == 1) ? '已开启' : '已关闭'}}
						</view>
					</view>
				</view>
			</view>
			<view class="btn_warp">
				<button class="btn_log" @tap="logoutFun">退出登录</button>
			</view>
		</view>
	</gui-page>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin']),
			...mapGetters([
				'getUserInfo'
			])
		},
		data() {
			return {
				form: {
					avatar: ''
				}
			}
		},
		onLoad() {
			this.form = this.getUserInfo;
		},
		methods: {
			...mapActions(['logout', 'getUserInfoStore']),
			async reload() {
				let result = await this.getUserInfoStore();
				if(result) {
					this.$refs.guipage.endReload();
				}
			},
			jumpLogin() {
				if (!this.hasLogin) {
					this.$u.to(`/pages/login/login`)
					return;
				}
			},
			jumpSetting() {
				if (!this.hasLogin) {
					this.$u.to(`/pages/login/login`)
					return;
				}
				this.$u.to(`/pages/settingPage/index`)
			},
			/* 上传头像 */
			chooseImage() {
				if (!this.hasLogin) {
					this.$u.to(`/pages/login/login`)
					return;
				}
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: async (res) => {
						const tempFilePaths = res.tempFilePaths;
						let size = res.tempFiles[0].size;
						if (size / (1024 * 1024).toFixed(2) > 2) {
							uni.showToast({
								title: '单张图片不可超过2M',
								icon: 'none'
							});
						} else {
							console.log(this.$http);
							let result = await this.$http.upload('/api/common/upload', tempFilePaths[0]);
							console.log(result);
							if (result.data.code == 200) {
								this.form.avatar = result.data.data;
								let form = {
									avatar: this.form.avatar
								}
								this.updateUser(form);
							}
						}
					}
				});
			},
			// 修改用户信息
			updateUser(form) {
				this.$api.updateUser(form).then(res => {
					if (res.code == 200) {
						this.$u.msg("修改成功")
						this.getUserInfoStore();
					}
				})
			},
			updateNoticeIs() {
				this.updateUser({
					noticeIs: (this.userInfo.noticeIs == 1) ? 0 : 1
				})
			},
			logoutFun() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							this.logout();
							this.$u.to(`/pages/login/login`, 'reLaunch')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.main {
		padding: 0 24rpx;
	}

	.tx_img {
		width: 126rpx;
		height: 126rpx;
		border-radius: 64rpx;
	}

	.n_info {
		padding-left: 20rpx;
	}

	.desc {
		margin-top: 10rpx;
	}

	.c666 {
		color: #666666;
	}

	.menu_warp {
		width: 100%;
		height: 356rpx;
		background: #FFFFFF;
		box-shadow: 0px 0 6rpx 1rpx rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
		padding: 36rpx;
	}

	.mt_50 {
		margin-top: 50rpx;
	}

	.mt_30 {
		margin-top: 30rpx;
	}

	.row {

		.icon {
			width: 84rpx;
			height: 84rpx;

			.icon_image {
				width: 100%;
				height: 100%;
			}
		}

		.right_con {
			padding-left: 40rpx;
		}
	}

	.btn_warp {
		margin-top: 80rpx;
	}

	.btn_log {
		width: 600rpx;
		height: 86rpx;
		background: linear-gradient(180deg, #7EC1FF 0%, #0A60FF 100%);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		opacity: 1;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.85);
		line-height: 86rpx;
	}
	
	.active {
		color: #FB6547;
	}
</style>